<template>
  <div class="session-wrap">
    <el-button type="success" @click="tabFun">上传导航栏</el-button>
    <el-table border :data="tableData">
      <el-table-column label="名称" align="center">
        <template slot-scope="scope">
          <el-input v-model="scope.row.name" placeholder="添加名称" />
        </template>
      </el-table-column>
      <el-table-column label="链接" align="center">
        <template slot-scope="scope">
          <el-input v-model="scope.row.url" placeholder="添加链接地址" />
        </template>
      </el-table-column>
      <el-table-column label="图片" align="center">
        <template slot-scope="scope">
          <el-upload
            class="avatar-uploader"
            :action="imgUpload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
            :limit="1"
          >
            <img v-if="scope.row.imgLink" :src="scope.row.imgLink" class="avatar" />
            <el-button v-else size="mini" type="primary" @click="curRowIndex=scope.$index">上传图片</el-button>
          </el-upload>
        </template>
      </el-table-column>
      <el-table-column label="删除" align="center">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleDelete(scope.$index)" type="danger">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close()" size="mini">取消</el-button>
      <el-button type="primary" @click="saveNavigationCode" size="mini">确定</el-button>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    name: "session",
    moduleId: {
      type: String
    },
    tableData: {
      type: Array,
      default: () => {
        return [];
      }
    },
    SinglEMapDialogVisible: {
      type: Boolean
    }
  },
  data() {
    return {
      curRowIndex: null,
      imgUpload: this.utils.imgUploadUrl, // 上传图片地址
      url: "",
      imageUrl:
        "https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1589264714&di=635e50cf9263f6a685ca264e8a09ebb0&src=http://pics7.baidu.com/feed/9f2f070828381f305c84b0b9653ddd0e6f06f0c0.jpeg?token=e0e85938242ff3d46787c77dabee7453"
    };
  },
  watch: {
    lessons(newVal, oldVal) {
      alert("11");
    }
  },
  methods: {
    close() {
      // this.MoreMapDialogVisible=false
      this.$router.push("/Pages/Configuration/Cms/CmsPages");
    },
    //图片上传成功 把图片地址赋值给对应列的imageUrl
    handleAvatarSuccess(res, file) {
      let index = this.curRowIndex;
      this.tableData[index].imgLink = file.response.data.imgUrl;
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    //上传导航栏
    tabFun() {
      this.tableData.push({
        name: "",
        url: "",
        imgLink: ""
      });
    },
    // 删除已上传的图片  handleRemove
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    //删除列表中的数据
    handleDelete(index) {
      this.tableData.splice(index,1);
    },
    //保存导航栏配置信息
    saveNavigationCode() {
      console.log(this.tableData);
      this.utils.request.cmsPageModuleAddModuleData(
        {
          templateDataType: 0,
          moduleId: this.moduleId,
          variablesObject: this.tableData
        },
        res => {
          if (res.code == "0000") {
            // this.SinglEMapDialogVisible=false
            this.$emit("SinglEMapDialogVisibleFun");
            this.$emit("getIndex");
            this.$message({ message: "保存成功", type: "success" });
          } else {
            this.$message({ message: res.msg, type: "error" });
          }
        }
      );
    }
  }
};
</script>
<style lang="scss" scoped>
.session-wrap {
  margin-top: 20px;
  text-align: left;
  .el-button {
    margin-bottom: 5px;
  }
  .avatar {
    width: 50px;
    height: 50px;
  }
  .dialog-footer {
    margin-top: 20px;
  }
}
</style>
